body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}

.size-controller {
  height: 40px;
  border-bottom: 1px #dddddd solid;
  display: flex;
  align-items: center;
}
.size-controller .item {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 12px;
}
.size-controller input {
  height: 24px;
  width: 60px;
}

.tools {
  width: 100px;
  padding: 10px;
  border-right: 1px #dddddd solid;
}
.canvas {
  padding: 10px;
  padding-left: 25px;
  position: relative;
}
#rulerCanvas {
  background: rgb(200, 200, 200);
}
.property {
  width: 300px;
  padding: 10px;
  border-left: 1px #a6a6a6 solid;
  margin-left: 15px;
}

.designerToolbarButton {
  background-size: 38px 38px;
  width: 38px;
  height: 38px;
  float: left;
}

.propertyItemLabel {
  width: 120px;
  height: 22px;
  float: left;
  font-size: 12px;
  line-height: 22px;
  text-align: right;
  padding-right: 5px;
  margin-left: 5px;
}

.propertyItemValue {
  width: 140px;
  height: 22px;
  float: left;
  line-height: 22px;
  padding-left: 5px;
}

.designerToolbarButtonActive div {
  background: rgba(255, 255, 0, 0.35);
  background-size: 38px 38px;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

.designerToolbarBarcode {
  background-image: url(../img/barcode.png);
}

.designerToolbarRectangle {
  background-image: url(../img/rectangle_fill.png);
}

.designerToolbarText {
  background-image: url(../img/text.png);
}

.designerToolbarImage {
  background-image: url(../img/image.png);
}

.designerToolbarQrcode {
  background-image: url(../img/qrcode.png);
}

/* #labelDesigner {
  outline: #e2e2e2 auto 1px;
} */

#labelDesigner:focus {
  outline: #409eff auto 1px;
}
